<template>
	<view class="">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px',backgroundColor: common.appStyle.user_bg_color?common.appStyle.user_bg_color:'#f7f7f7',
			backgroundImage: 'url(' + $wanlshop.oss(common.appStyle.user_bg_image, 414, 0, 1, 'transparent', 'png') + ')',
			color: common.appStyle.user_font_color == 'light'?'#ffffff':'#222222' }">
			<view class="cu-bar fixed" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px'
			}">
				<view class="action">
					<text class="wlIcon-fanhui1" style="margin-left: 0;" @tap="$wanlshop.back(1)"></text>
					<!-- #ifdef MP -->
					<!-- <text class="wlIcon-shezhi" @tap="$wanlshop.to('/pages/business/setting')"></text> -->
					<!-- #endif -->
				</view>
				<view class="content" :style="{top: $wanlshop.wanlsys().top + 'px'}">
					商家后台
				</view>
			</view>
		</view>

		<!--商家信息-->
		<view v-if="shopDetail" class="shop-container padding-sm wanl-user" :style="{
			backgroundColor: common.appStyle.user_bg_color?common.appStyle.user_bg_color:'#f7f7f7',
			backgroundImage: 'url(' + $wanlshop.oss(common.appStyle.user_bg_image, 414, 0, 1, 'transparent', 'png') + ')',
			color: common.appStyle.user_font_color == 'light'?'#ffffff':'#222222'}">
			<view class="info" style="width:80%;">
				<view class="name text-cut text-bold flex align-center">
					<image :src="shopDetail.avatar" class="radius" mode="aspectFill"
						style="width: 120rpx;height: 120rpx;"></image>
					<view style="display: block;" class="margin-left-xs">
						<view style="display: flex;">
							<view class="margin-left-xs" style="font-size:16px;font-weight:border;">
								{{shopDetail.shopname}}
							</view>
							<view class="menu text-lg text-black text-bold" style="margin-left:2px;">
								<text class="wlIcon-jifen"  v-if="showAddSubBtn" @tap="$wanlshop.to('/pages/business/setting')"></text>
							</view>
						</view>
						<view v-if="showAddSubBtn" @click="gotocashout" class="margin-left-xs"
							style="font-size:13px;font-weight:normal;padding-top:10px;"> 余额:
							{{shopDetail.cashout_banance}}
						</view>
					</view>
				</view>
				<view class="exponent text-min wanl-gray-dark">
				</view>
			</view>
			<view v-if="showAddSubBtn" style="width:20%;" @tap="goPoster()">
				<!-- 点击后弹出推广海报 -->
				<image src="/static/images/live/qrcode.png" class="radius" mode="aspectFill"
					style="width: 120rpx;height: 120rpx;"></image>
			</view>

			<!-- 弹出框 -->

			<uni-popup :showPopup="posterImageStatus" ref="wanlCommentPopup" @close="posterImageStatus = false"
				type="center">
				<view style="wdith:100%;height:25px;text-align:center;justify-content: center;"
					@tap="posterImageClose()">
					<image style="z-index: 999;width:15px;height:25px;justify-content:center;"
						src='/static/images/live/poster-close.png' class='close' @click="posterImageClose"></image>
				</view>
				<view class="popup-box">
					<!-- 海报展示 -->
					<view class="images-box" style="display: block;">
						<image class="images" :src='posterImage' v-show="posterImageStatus" alt="image"></image>
						<canvas class="canvas" :style="{width: canvasW + 'px', height: canvasH + 'px'}"
							canvas-id='myCanvas' v-if="canvasStatus"></canvas>

					</view>
					<view class='keep b-color' @click='savePosterPath(posterImage)'>保存海报</view>

				</view>
			</uni-popup>

		</view>


		<!--数据-->
		<view class="wanl-user-tool padding-top-bj margin-lr-bj margin-top-bj">
			<view class="list grid col-4 text-sm wanl-gray-dark">
				<view style="line-height: 1.8;" @tap="$wanlshop.auth('/pages/business/order?state=1')">
					<view class="wanl-pip text-lg text-bold6">{{ shopData.wait_pay }}</view>
					待付款
				</view>
				<view style="line-height: 1.8;" @tap="$wanlshop.auth('/pages/business/order?state=2')">
					<view class="wanl-pip text-lg text-bold6">{{ shopData.wait_send }}</view>
					待发货
				</view>
				<view style="line-height: 1.8;" @tap="$wanlshop.auth('/pages/business/order?state=3')">
					<view class="wanl-pip text-lg text-bold6">{{ 0 }}</view>
					待收货
				</view>
				<view style="line-height: 1.8;" @tap="">
					<view class="wanl-pip text-lg text-bold6">{{ shopData.amount | twoDecimals  }}</view>
					成交额
				</view>

				<view style="line-height: 1.8;" @tap="$wanlshop.auth('/pages/business/order')">
					<view class="wanl-pip text-lg text-bold6">{{ shopData.completed }}</view>
					订单数
				</view>
				<view style="line-height: 1.8;" @tap="">
					<view class="wanl-pip text-lg text-bold6">{{ shopData.comments }}</view>
					评论数
				</view>
				<view style="line-height: 1.8;" @tap="$wanlshop.auth('/pages/business/product')">
					<view class="wanl-pip text-lg text-bold6">{{ shopData.goods }}</view>
					商品数
				</view>
				<view style="line-height: 1.8;" @tap="">
					<view class="wanl-pip text-lg text-bold6">{{ shopData.withdraw | twoDecimals }}</view>
					已提现
				</view>
			</view>
		</view>

		<view class="wanl-user-tool padding-top-bj margin-lr-bj margin-top-bj">
			<view class="list grid col-3 text-sm wanl-gray-dark">

				<view @tap="$wanlshop.auth('/pages/business/product')">
					<text class="wlIcon-shangpin2 wanl-orange"></text>
					商品管理
				</view>

				<!-- 	<view @tap="$wanlshop.auth('/pages/business/data')">
					<text class="wlIcon-dingdan1 wanl-text-blue"></text>
					数据中心
				</view> -->
				<view @tap="$wanlshop.auth('/pages/business/verification')">
					<text class="wlIcon-gerenerweima wanl-text-red"></text>
					商家核销
				</view>


				<view v-if="showAddSubBtn" @tap="$wanlshop.auth('/pages/business/order')">
					<text class="wlIcon-dingdan wanl-text-yellow"></text>
					订单管理
				</view>

				<view @click="addSubAccount" v-if="showAddSubBtn">
					<text class="wlIcon-shoucangxuanzhong wanl-text-red"></text>
					添加子帐号
				</view>


				<view @click="gotosublist" v-if="showAddSubBtn">
					<text class="wlIcon-pengyouquan wanl-text-red"></text>
					子帐号管理
				</view>


<!-- 				<view @click="groupsset" v-if="showAddSubBtn">
					<text class="wlIcon-pengyouquan wanl-text-red"></text>
					拼团管理
				</view> -->

				<!-- 	<view @tap="$wanlshop.auth('/pages/business/setting')">
					<text class="wlIcon-shezhi wanl-text-green"></text>
					设置
				</view> -->

			</view>
		</view>


		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="addsub">
				<view class="title">绑定子帐号</view>
				<view class="cu-form-group">
					<view class="title">手机号：</view>
					<input placeholder="请输入要绑定的帐号的手机号" v-model="mobile"></input>
				</view>
				<view class="btns">
					<button class="confirm" @click="addsubconfirm">确定</button>
					<button class="cancel" @click="addsubcancel">取消</button>
				</view>

			</view>

		</uni-popup>

		<!--图表-->
		<!-- 	<view class="wanl-user-tool padding-top-bj margin-bj">
			<view class="charts-box">
			  <qiun-data-charts type="line" :chartData="chartData" />
			</view>
		</view> -->

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				mobile: "", //子帐号的手机号
				showAddSubBtn: false,

				shopDetail: [], //门店详情
				shopData: [], //店铺信息
				chartData: {},

				canvasW: 600,
				canvasH: 870,
				posterImage: '', //海报路径
				posterImageStatus: false,
				canvasStatus: false, //海报绘图标签
				posters: false,
				posterbackgd: 'https://adminshop.12sxb.cn/uploads/20241206/455dc2e964905cf8db6b8b810c48bce6.png'
			};
		},
		computed: {
			...mapState(['user', 'statistics', 'common'])
		},
		filters: {
			twoDecimals(value) {
				if (!value || value === 0) return '0.00';
				return parseFloat(value).toFixed(2);
			}
		},
		onLoad() {

			console.log("==============1=================");
			//判断用户是不是店铺的主帐户
			this.checkshowAddsub();
		},

		onShow() {
			let that = this;
			uni.request({
				url: '/index/poster',
				method: 'GET',
				success: res => {
					let data = res.data;
					that.posterbackgd = 'https://adminshop.12sxb.cn' + data; //推广图版的背景图
					console.log("that.posterbackgd = " + that.posterbackgd);
					this.getShopDetail()
					this.getShopData()
					// this.getChartData()
				}
			});
		},

		onReady() {
			this.getServerData();
		},
		methods: {

			checkshowAddsub() {
				let that = this;
				uni.request({
					url: "/wanlshop/shop/isMainShopUser",
					method: "POST",
					success(res) {
						console.log(res);
						if (res.data.tag) {
							that.showAddSubBtn = true;
						}
					}
				})
			},

			gotosublist(){
				uni.navigateTo({
					url:"/pages/business/sublist"
				})
			}, 
			
			addsubconfirm() {
				let that = this;
				let reg = /^\d{11}$/;
				if (!reg.test(this.mobile)) {
					uni.showToast({
						icon: "none",
						title: "请输入正确的手机号码"
					})
					return;
				}
				let params = {
					mobile: this.mobile
				};


				uni.request({
					url: "/wanlshop/shop/addSubShopers",
					method: "post",
					data: params,
					success(res) {
						uni.showToast({
							icon: "none",
							title: "绑定成功"
						})
						that.mobile = "";
						that.$refs.popup.close();
					}
				})
			},


			addSubAccount() {
				this.$refs.popup.open();
			},



			//点转到提现页面
			gotocashout() {
				uni.navigateTo({
					url: "/pages/user/money/shopmoney?from=shop"
				})
			},
			
			
			
			groupsset(){
				uni.navigateTo({
					url:"/pages/business/groupsset"
				})
			},
			
			



			//隐藏海报
			posterImageClose: function() {
				this.posterImageStatus = false;
				this.$refs.wanlCommentPopup.close();
			},
			/*
			 * 保存到手机相册
			 */
			// #ifdef MP
			savePosterPath: function() {
				let that = this;
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									uni.saveImageToPhotosAlbum({
										filePath: that.posterImage,
										success: function(res) {
											that.posterImageClose();
											that.$util.Tips({
												title: '保存成功',
												icon: 'success'
											});
										},
										fail: function(res) {
											that.$util.Tips({
												title: '保存失败'
											});
										}
									})
								}
							})
						} else {
							uni.saveImageToPhotosAlbum({
								filePath: that.posterImage,
								success: function(res) {
									that.posterImageClose();
									that.$util.Tips({
										title: '保存成功',
										icon: 'success'
									});
								},
								fail: function(res) {
									that.$util.Tips({
										title: '保存失败'
									});
								},
							})
						}
					}
				})
			},
			// #endif
			/**
			 * 生成海报
			 */
			async goPoster() {
				let that = this;

				console.log(that.posterbackgd);

				let arr2 = [that.posterbackgd, await that.fileStoreImage(this.posterbackgd)];
				//console.log("goPoster method1 ===>" + this.posterbackgd); 

				this.$refs.wanlCommentPopup.open(); //打开弹窗
				if (this.posterImage) {
					this.posterImageStatus = true
					return
				}

				that.posters = false;
				that.$set(that, 'canvasStatus', true);
				uni.showLoading({
					title: '海报生成中',
					mask: true
				});

				uni.hideLoading();
				console.log("this.shopDetail ===>" + JSON.stringify(this.shopDetail));
				if (this.shopDetail && this.shopDetail['id']) { ///如果有店铺信息，则生成店铺推广海报
					//生成推广海报
					that.$util.PosterCanvas(arr2, this.shopDetail, function(tempFilePath) {

						that.$set(that, 'posterImage', tempFilePath);
						that.$set(that, 'posterImageStatus', true);
						that.$set(that, 'canvasStatus', false);
						that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
					}, (err) => {
						that.$set(that, 'canvasStatus', false);
					});
				} else {
					uni.request({
						url: '/wanlshop/shop/detail',
						method: 'GET',
						success: res => {
							this.shopDetail = res.data
							//生成推广海报
							that.$util.PosterCanvas(arr2, this.shopDetail, function(tempFilePath) {
								//tempFilePath = http://tmp/wUnHcDUCGqsA611f9d378bd3d39361f7c6fe51869997.png

								that.$set(that, 'posterImage', tempFilePath);
								that.$set(that, 'posterImageStatus', true);
								that.$set(that, 'canvasStatus', false);
								that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
							}, (err) => {
								that.$set(that, 'canvasStatus', false);
							});
						}
					});
				}
			},

			//图片转符合安全域名路径
			fileStoreImage(url) {
				// #ifdef MP
				let ishttps = url.split('//')[0] == 'https:'
				if (!ishttps) {
					url = 'https://' + url.split('//')[1]
				}
				// #endif
				return new Promise((resolve, reject) => {
					let that = this;
					uni.downloadFile({
						url: url,
						success: function(res) {
							resolve(res.tempFilePath);
						},
						fail: function(error) {
							console.log(error)
							return that.$util.Tips({
								title: `${error}`
							});
						}
					});
				})
			},

			//获取门店详情
			getShopDetail() {
				uni.request({
					url: '/wanlshop/shop/detail',
					method: 'GET',
					success: res => {
						/*
						{"data":{"id":3,"user_id":63,"shopname":"人人聚","keywords":"人人聚",
						"description":"此人很懒，不想描述",
						"service_ids":[{"id":2,"name":"24小时内发货","description":"商家保障，24小时内发出货品"}],
						"avatar":"https://adminshop.12sxb.cn//uploads/20241206/5ba29f18d58bbc6c6f29a10d3c91f1cb.jpg",
						"state":"1","level":0,"islive":0,"isself":1,"bio":"人人聚","city":"湖北省/襄阳市/谷城县",
						"return":"","like":0,"score_describe":0,"score_service":0,"score_deliver":0,"score_logistics":0,
						"weigh":2,"verify":"3","createtime":1721654740,"updatetime":1733447567,"deletetime":null,
						"status":"normal","longitude":111.627515,"latitude":32.266242,"type":1,
						"address":"广厦家园小区","biz_time":"00:00-00:00","money":"90.00",
						"find_user":{"user_no":"295418376","fans":0}},
						"header":{"Server":"nginx","Date":"Sat, 07 Dec 2024 07:03:19 GMT",
						"Content-Type":"application/json; charset=utf-8","Transfer-Encoding":"chunked",
						"Connection":"keep-alive","Strict-Transport-Security":"max-age=31536000"},
						"statusCode":200,"cookies":[],"accelerateType":"none","errMsg":"request:ok",
						"res":{"code":1,"msg":"返回成功","time":"1733554999","data":{"id":3,"user_id":63,
						"shopname":"人人聚","keywords":"人人聚","description":"此人很懒，不想描述",
						"service_ids":[{"id":2,"name":"24小时内发货","description":"商家保障，24小时内发出货品"}],
						"avatar":"https://adminshop.12sxb.cn//uploads/20241206/5ba29f18d58bbc6c6f29a10d3c91f1cb.jpg",
						"state":"1","level":0,"islive":0,"isself":1,"bio":"人人聚","city":"湖北省/襄阳市/谷城县",
						"return":"","like":0,"score_describe":0,"score_service":0,"score_deliver":0,"score_logistics":0,
						"weigh":2,"verify":"3","createtime":1721654740,"updatetime":1733447567,"deletetime":null,
						"status":"normal","longitude":111.627515,"latitude":32.266242,"type":1,"address":"广厦家园小区",
						"biz_time":"00:00-00:00","money":"90.00","find_user":{"user_no":"295418376","fans":0}}},"msg":"返回成功"}
						*/
						this.shopDetail = res.data
					}
				});
			},

			//获取门店数据
			getShopData() {
				uni.request({
					url: '/wanlshop/shop/data',
					method: 'GET',
					success: res => {

						this.shopData = res.data
					}
				});
			},
			//获取图表数据
			getChartData() {
				uni.request({
					url: '/wanlshop/shop/saleData',
					method: 'GET',
					success: res => {
						//this.shopData = res.data					
					}
				});
			},

			//图表
			getServerData() {
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["08/06", "08/07", "08/08", "08/09", "08/10", "08/11", "08/12"],
						series: [
							//  {
							// name: "目标值",
							// data: [35,36,31,33,13,34,11]
							//  },
							{
								name: "成交金额",
								data: [0, 0, 0, 0, 0, 0, 0]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},


		}
	};
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.shop-container {
		display: flex;
		align-items: center;
		// justify-content: space-between;
	}


	/* 工具箱 */
	.wanl-user-tool {
		background-color: #ffffff;
		border-radius: 24rpx;
	}

	.wanl-user-tool .title {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.wanl-user-tool .title text {
		margin-left: 2rpx;
	}

	/* 状态 */
	.wanl-user-tool .list {
		text-align: center;
	}

	.wanl-user-tool .list>view {
		margin-bottom: 28rpx;
		position: relative;
	}

	.wanl-user-tool .list>view .cu-tag {
		top: -8rpx;
		left: 80rpx;
		right: unset;
	}

	.wanl-user-tool .list text {
		display: block;
		font-size: 54rpx;
		margin-bottom: 8rpx;
	}





	.popup-box {
		width: 100%;
		height: 450px;
		text-align: center;
		background-color: white;
		border-radius: 10rpx;
		font-size: 28rpx;
	}

	.images-box {
		width: 100%;
		height: 100%;
	}

	.images {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.keep {
		font-size: 30rpx;
		color: #fff;
		width: 600rpx;
		height: 80rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 38rpx auto;
		background-color: var(--view-theme);
	}

	.b-color {
		background-color: #1A9AFF;
	}

	.addsub {
		width: 100%;
		height: 500rpx;
		background: #fff;

		.title {
			text-align: center;
			line-height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			font-weight: bold;
		}

		.cu-form-group {
			justify-items: center;

			input {
				border: 1rpx solid #aaa;
				height: 60rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
			}
		}

		.btns {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 50rpx;

			.confirm {
				height: 60rpx;
				width: 160rpx;
				background: #2979ff;
				color: #fff;
				line-height: 60rpx;
				font-size: 24rpx;
			}

			.cancel {
				height: 60rpx;
				width: 160rpx;
				background: #94bcff;
				color: #fff;
				line-height: 60rpx;
				font-size: 24rpx;
			}
		}
	}
</style>